<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object.defineProperty</title>
</head>
<body>
<div id="app"></div>
<script>
    const app = document.getElementById('app')
    const obj = {
        name: 'proxy',
        age: 18,
        address: '中国'
    }
    /*Object.defineProperty(obj, 'name', {
        enumerable: true, // 是否可枚举 表示该属性是否可以在 for...in 循环中被枚举。如果设置为 true，则该属性可以在 for...in 循环中被访问。
        configurable: false, // 是否可配置 表示该属性是否可以被删除或修改其描述符。如果设置为 true，则可以删除该属性或修改其描述符。
        writable: true, // 是否可修改 表示该属性的值是否可以被修改。如果设置为 true，则可以通过赋值操作修改该属性的值。
        value: 'proxy1'
    })*/
    for (let key in obj) {
        if(obj.hasOwnProperty(key)) {
            let value = obj[key]
            Object.defineProperty(obj, key, {
                get() {
                    return value
                },
                set(newValue) {
                    if(newValue !== value) {
                        console.log(1);
                        value = newValue
                        app.innerHTML += `<p>${key}属性值被修改为${newValue}</p>`
                    }
                }
            })
        }
    }
    app.innerHTML += `<p>name属性值为${obj.name}</p>`
    obj.name = '玖哲'
    console.log(obj);
</script>
</body>
</html>
